<script setup lang="ts">
import Carousel from '@/pages/home/carousel/index.vue'
import Search from '@/pages/home/search/index.vue'
import Level from '@/pages/home/level/index.vue'
import Region from '@/pages/home/region/index.vue'
import Card from '@/pages/home/card/index.vue'
import tip from '@/pages/home/tip/index.vue'
import {ref,onMounted} from 'vue';
import {reqHospital} from "@/api/home";
import type {Content, HospitalResponseData} from "@/api/home/type.ts";

let total = ref(0);
let hasHospitalArr = ref<Content>([])

//分页需要的数据
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
//存储医院等级
let hostype = ref<string>('');
//存储医院的地区
let districtCode = ref<string>('');

onMounted(() => {
  getHospitalInfo();
})

//获取已有的医院的数据
const getHospitalInfo = async () => {
  let result:HospitalResponseData = await reqHospital(pageNo.value,pageSize.value,hostype.value,districtCode.value);
  if(result.code == 200){
    hasHospitalArr.value = result.data.content;
    total.value = result.data.totalElements;
  }
}

//分页器页码发生变化时回调
const currentChange = ()=>{
  getHospitalInfo();
}

//分页条变化触发
const sizeChange = ()=>{
  getHospitalInfo();
}

//子组件自定义事件：获取儿子给父组件传递过来的等级参数
const getLevel=(level:string) =>{
  hostype.value = level;
  getHospitalInfo();
}
const getRegion = (region:string) =>{
  districtCode.value = region;
  getHospitalInfo();
}
</script>

<template>
  <div>
    <carousel/>
<!--    搜索框-->
    <search/>
<!--    底部展示医院的结构-->
    <el-row gutter="20">
      <el-col :span="20">
<!--        等级-->
        <level @getLevel="getLevel"/>
<!--        地区-->
        <region @getRegion="getRegion"/>
<!--        展示医院结构-->
        <div class="hospital" v-if="hasHospitalArr.length>0">
          <card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo="item"/>
        </div>
        <el-empty v-else description="没有医院" />
<!--        分页-->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout=" prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
        />
      </el-col>

      <el-col :span="4">
        <tip/>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.hospital{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item{
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
